<template>
  <PageContent border>
    <template slot="toolbar">
      <ActionButton
        @click="onPreviewCode"
        content="查看代码"
        icon="linear-fangan80"
      />
      <div style="flex:1"></div>
    </template>
    <Split class="generator" v-model="split" :min="minSplit">
      <Tree
        slot="left"
        class="config-tree"
        :data="treeData"
        :render="renderTreeNode"
        @on-select-change="onSelectChange"
      />
      <div slot="right" class="generator-code-view">
        <Component
          :is="component.type"
          :params="component.params"
          :config="config"
          @change="refreshTree"
        />
      </div>
    </Split>
  </PageContent>
</template>

<script>
import ConfigPages from "./ConfigPages";
import CodePreview from "./CodePreview";
import ConfigPageEditor from "./ConfigPageEditor";
import ConfigWebApiEditor from "./ConfigWebApiEditor";
import ConfigDictEditor from "./ConfigDictEditor";
import ConfigDictGroupNode from "./ConfigDictGroupNode";
import ConfigPageGroupNode from "./ConfigPageGroupNode";
import ConfigPageNode from "./ConfigPageNode";
import ConfigWebapiGroupNode from "./ConfigWebapiGroupNode";
import DefaultTreeNode from "./DefaultTreeNode";
import WebapiTreeNode from "./WebapiTreeNode";
const [TYPE_PAGE, TYPE_WEBAPI, TYPE_DICT] = ["page", "webapi", "dict"];
const [TYPE_PAGES, TYPE_WEBAPIS, TYPE_DICTS] = ["pages", "webapis", "dicts"];
export default {
  data() {
    return {
      split: "400px",
      minSplit: "400px",
      config: {
        pages: [
          {
            name: "searchs",
            title: "统计查询",
            icon: "planar-folder-open",
            children: [
              /** 案件查询 anjianchaxun */
              {
                name: "anjianchaxun",
                title: "案件查询",
                icon: "planar-drxx69",
                fields: [
                  { name: "_index", fixed: "", editor: false },
                  {
                    name: "code",
                    text: "案件编号",
                    filter: { mode: "default" },
                    width: 200,
                  },
                  {
                    name: "name",
                    text: "案件名称",
                    filter: { mode: "default" },
                    width: 300,
                  },
                  { name: "typeName", text: "案件类型" },
                  { name: "verdictName", text: "裁定类型" },
                  { name: "charge", text: "案由", width: 200 },
                  { name: "criminal", text: "嫌疑人" },
                  { name: "hostUnitName", text: "主办单位" },
                  { name: "time", text: "立案时间", type: "date" },
                ],
                search: {
                  operation: {
                    fixed: "none",
                  },
                },
                apis: {
                  query: "/case/data/query",
                },
              },
            ],
          },
          /** 字典数据 dict */
          {
            name: "dict",
            title: "字典数据",
            icon: "planar-folder-open",
            children: [
              /** 字典索引 dictionary-index */
              {
                name: "dictionary-index",
                title: "字典索引",
                icon: "planar-drxx69",
                fields: [
                  { name: "_selection", fixed: "", editor: false },
                  {
                    name: "name",
                    text: "数据字典名称",
                    editor: { required: true },
                  },
                  {
                    name: "alias",
                    text: "数据字典别名",
                    editor: { required: true },
                  },
                  {
                    name: "remark",
                    text: "数据字典备注",
                    width: "*",
                    type: "textarea",
                    tooltip: true,
                  },
                ],
                search: {
                  operation: {
                    fixed: "none",
                  },
                },
                apis: {
                  query: "/system/dictionary/index/query",
                  remove: "/system/dictionary/index/remove",
                  create: "/system/dictionary/index/create",
                  update: "/system/dictionary/index/modify",
                  detail: "/system/dictionary/index/detail",
                },
              },
              /** 字典数据 dictionary-data */
              {
                name: "dictionary-data",
                title: "字典数据",
                icon: "planar-drxx69",
                fields: [
                  { name: "_selection", fixed: "", editor: false },
                  {
                    name: "name",
                    text: "数据字典名称",
                    filter: { mode: "default" },
                    relation: {
                      name: "queryDictionaryIndex",
                      key: "name",
                      value: "alias",
                    },
                    editor: { required: true },
                  },
                  {
                    name: "dictkey",
                    text: "字典项键",
                    editor: { required: true },
                  },
                  {
                    name: "dictvalue",
                    text: "字典项值",
                    width: "*",
                    editor: { required: true },
                  },
                  {
                    name: "extra",
                    text: "字典项附加数据",
                    width: "*",
                    type: "textarea",
                    tooltip: true,
                  },
                ],
                search: {
                  operation: {
                    fixed: "none",
                  },
                },
                apis: {
                  query: "/system/dictionary/data/query",
                  create: "/system/dictionary/data/create",
                  update: "/system/dictionary/data/modify",
                  remove: "/system/dictionary/data/remove",
                  detail: "/system/dictionary/data/detail",
                },
              },
            ],
          },
          /** 鉴权管理 system */
          {
            name: "system",
            title: "鉴权管理",
            icon: "planar-drxx33",
            children: [
              /** 派出所管理 unit-index */
              {
                name: "unit-index",
                title: "派出所",
                icon: "planar-drxx69",
                fields: [
                  { name: "_selection", fixed: "", editor: false },
                  {
                    name: "mingCheng",
                    text: "派出所名称",
                    editor: { required: true },
                  },
                  {
                    name: "fenZu",
                    text: "分组名称",
                    filter: { mode: "default" },
                    hidden: true,
                    type: "selector",
                    editor: { required: true },
                    relation: {
                      name: "queryDictionaryData",
                      key: "dictkey",
                      value: "dictvalue",
                      params: { name: "PCSFZ" },
                    },
                  },
                  { name: "fenZuMingCheng", text: "分组名称", editor: false },
                ],
                search: {
                  operation: {
                    fixed: "none",
                  },
                },
                apis: {
                  query: "/system/unit/query",
                  remove: "/system/unit/remove",
                  create: "/system/unit/create",
                  update: "/system/unit/modify",
                  detail: "/system/unit/detail",
                },
              },
            ],
          },
        ],
        webapi: {
          apis: {},
        },
        dict: {
          status: {
            "1": "启用",
            "0": "禁用",
          },
        },
      },
      component: {
        type: "CodePreview",
        params: {},
      },
    };
  },
  methods: {
    onPreviewCode() {
      this.component = { type: "CodePreview" };
    },

    onSelectChange(eventArgs) {
      if (!eventArgs[0] || !eventArgs[0].type) {
        return;
      }
      let component = "";
      let params = eventArgs[0];
      switch (params.type) {
        case TYPE_PAGE:
          component = "ConfigPageEditor";
          break;
        case TYPE_DICT:
          component = "ConfigDictEditor";
          break;
        case TYPE_WEBAPI:
          component = "ConfigWebApiEditor";
          break;
        default:
          return;
      }
      this.component = {
        type: component,
        params,
      };
    },

    refreshTree(config) {
      this.config = { ...config };
    },

    // #region 渲染树形结构
    renderTreeNode(h, { root, node, data }) {
      const { type } = data;
      let on = {};
      let componentType = DefaultTreeNode;
      switch (type) {
        case TYPE_PAGES:
          on["create-new"] = () => {
            this.component = { type: "ConfigPageEditor" };
          };
          componentType = ConfigPageGroupNode;
          break;
        case TYPE_PAGE:
          if (data.level == 1) {
            componentType = ConfigPageNode;
            on["create-new"] = () => {
              this.component = {
                type: "ConfigPageEditor",
                params: {
                  parentName: data.meta.name,
                },
              };
            };
          }
          break;
        case TYPE_WEBAPIS:
          on["create-new"] = () => {
            this.component = { type: "ConfigWebApiEditor" };
          };
          componentType = ConfigWebapiGroupNode;
          break;
        case TYPE_DICTS:
          on["create-new"] = () => {
            this.component = { type: "ConfigDictEditor" };
          };
          componentType = ConfigDictGroupNode;
          break;
        case TYPE_WEBAPI:
          componentType = WebapiTreeNode;
          break;
        default:
          break;
      }
      return h(componentType, { props: { node: data }, on });
    },
    // #endregion
  },
  computed: {
    treeData() {
      const pages = this.config.pages.map((p) => {
        return {
          title: `${p.title}(${p.name})`,
          expand: true,
          type: TYPE_PAGE,
          level: 1,
          meta: { ...p },
          children: p.children.map((cp) => {
            return {
              level: 2,
              type: TYPE_PAGE,
              parentName: p.name,
              meta: { ...cp },
              title: `${cp.title}(${cp.name})`,
            };
          }),
        };
      });

      const dictsKeys = Object.keys(this.config.dict);
      const dicts = dictsKeys.map((p) => {
        const item = this.config.dict[p];
        // const dictKeys = Object.keys(item);
        return {
          title: p,
          dictName: p,
          level: 1,
          type: TYPE_DICT,
          dict: item,
        };
      });

      const webapi = this.config.webapi || { apis: {} };
      const webapiKeys = Object.keys(webapi.apis);
      const webapis = webapiKeys.map((p) => {
        const item = webapi.apis[p];
        return {
          level: 1,
          type: TYPE_WEBAPI,
          meta: { name: p, addr: item },
        };
      });

      return [
        {
          title: "页面｜PAGES",
          type: TYPE_PAGES,
          expand: true,
          children: pages,
        },
        {
          title: "自定义接口｜WEBAPI",
          type: TYPE_WEBAPIS,
          expand: true,
          children: webapis,
        },
        {
          title: "数据字典｜DICT",
          type: TYPE_DICTS,
          expand: true,
          children: dicts,
        },
      ];
    },
  },
  components: {
    ConfigPages,
    CodePreview,
    ConfigPageEditor,
    ConfigDictEditor,
    ConfigWebApiEditor,
  },
};
</script>

<style lang="less" scoped>
.generator {
  height: 100%;
  &-code-view {
    margin-left: 6px;
    height: 100%;
    position: relative;
  }
}
</style>

<style lang="less">
.config-tree {
  .ivu-tree-title {
    padding: 0 !important;
  }
  .ivu-tree-arrow {
    width: 32px;
    margin-top: 7px;
  }
}
</style>
